import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
const BarChat = ({ title }) => {

    const chatRef = useRef(null)
    useEffect(() => {
        //获取渲染图标的dom节点
        var chartDom = chatRef.current
        //图标初始化
        var myChart = echarts.init(chartDom);
        var option = {
            title: {
                text: title
            },
            xAxis: {
                type: 'category',
                data: ['Vue', 'React', 'Angular']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [10, 40, 70],
                    type: 'bar'
                }
            ]
        };

        option && myChart.setOption(option);

    }, [])
    return (
        <div>
            
            <div ref={chatRef} style={{ width: "500px", height: "400px" }}></div></div>
    )
}

export default BarChat